<script lang='ts' setup>
import { ref, reactive } from 'vue'
import dictionaryTypeApi from '/@/api/org/bean/dictionary-type'
import { deletePageTableSelectionDataList } from '/@/utils/api-service'
import { jumpPath } from '/@/utils/router-kit'
import { DictionaryTypeAddUrl, DictionaryTypeEditUrl } from '/@/views/org/mapping.json'
const DictionaryTypeListTableRef = ref()
const DictionaryTypeListTableState = reactive({
    queryColumn: [
        { name: 'likeAll', type: 'input', label: '模糊搜索', placeholder: '请输入数据字典编码/数据字典名称' }
    ],
    /**查询参数 */
    queryparam: { likeAll: null },
    /**
     * 表格选中的数据
     */
    selectionData: [] as any[],
    /**
     * 表格的列配置
     */
    tableColumn: [
        { label: '序号', width: '50', type: 'selection' },
        { label: '序号', width: '50', type: 'index' },
        {
            prop: "codeItemId", label: "数据字典编码", width: "300", sort: { sortable: 'custom' }, type: 'link',
            linkClick: (row: any) => jumpPath(DictionaryTypeEditUrl + row.codeItemId), align: 'left'
        },
        { prop: "codeItemName", label: "数据字典名称", align: 'left' },
        { prop: "itemScope", label: "级别", width: '100' },
        { prop: "updatable", label: "是否可编辑", width: '100', slot: 'customUpdateable' },
    ],
    /**
     * 表格数据加载的方法
     */
    loadData: (params: any) => dictionaryTypeApi.queryPage(null, { ...params, ...DictionaryTypeListTableState.queryparam, refCols: 'default' }),
    /**
     * 表格导出excel的方法
     */
    expData: (params: any) => dictionaryTypeApi.exportData({ refCols: 'default' }, { ...params }),
    /**
     * 表格选中事件
     */
    tableSelectionChange: (dataList: any[]) => {
        DictionaryTypeListTableState.selectionData = dataList
    },
    /**
     * 表格删除事件
     */
    deleteTableData: () => {
        //删除表格数据提供两种不同的api 一个是整行数据数组删除 一个是取行主键id数组删除
        deletePageTableSelectionDataList(DictionaryTypeListTableRef, dictionaryTypeApi)
    },
    /**
     * 新增按钮点击事件
     */
    onAddButtonClick: () => {
        jumpPath(DictionaryTypeAddUrl)
    },
    /**
     * 查询事件
     */
    onSearch: () => {
        DictionaryTypeListTableRef.value.loadTable()
    }
})

defineExpose({
    getDictionaryTypeListTableRef: () => DictionaryTypeListTableRef.value,
    deleteTableData: () => DictionaryTypeListTableState.deleteTableData()
})
</script>
<template>
    <jxtech-page-table
        ref="DictionaryTypeListTableRef"
        row-key="qualitycardId"
        fit="full"
        :table-column="DictionaryTypeListTableState.tableColumn"
        :load-data="DictionaryTypeListTableState.loadData"
        :exp-data="DictionaryTypeListTableState.expData"
        @selection-change="DictionaryTypeListTableState.tableSelectionChange"
    >
        <template #header>
            <div class="jxtech-page-table-header-flex">
                <jxtech-search-form
                    :query-column="DictionaryTypeListTableState.queryColumn"
                    :query-form="DictionaryTypeListTableState.queryparam"
                    @handle-search="DictionaryTypeListTableState.onSearch"
                    :col-span="12"
                ></jxtech-search-form>
            </div>
        </template>
        <template #customUpdateable="{ row }">
            <el-tag v-if="row.updatable" type="success" size="small">是</el-tag>
            <el-tag v-else type="info" size="small">否</el-tag>
        </template>
    </jxtech-page-table>
</template>